<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>运营系统登录页</title>
<link href="static/css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script>
<style>
.none {
	display: none;
}

.height-20 {
	height: 20px;;
}

.button {
	color: red;
	font-size: 18px;
	width: 100px;
	height: 18px;;
	border: 1px solid red;
	border-radius: 5px;
}
</style>
<style>
.J_codeimg {
	z-index: -1;
	position: absolute;
}
</style>
</head>
<body>
	<div class="login-box" id="demo">
		<div class="input-content">
			<div class="login_tit">
				<div>
					<i class="tit-bg left"></i> EmpTraining · 重置密码 <i class="tit-bg right"></i>
				</div>
				<p>Strive&nbsp;&nbsp;&nbsp;&nbsp;Everyday</p>
			</div>
			<p class="p user_icon">
				<input type="password" placeholder="请输入要修改的密码" autocomplete="off" 
					class="login_txtbx" id="pwd" name="pwd" required="required">
			</p>
			<a>&nbsp;</a>
			<p class="p pwd_icon">
				<input type="password" placeholder="请确认输入的密码" autocomplete="off" 
					class="login_txtbx" id="pwd1" name="pwd1" required="required">
			</p>
			<input type="hidden" id="username" name="username" value="<%=request.getParameter("username")%>">
			<div class="signup">
				<a class="gv" href="#" onclick="PwdUpd()">确认修改</a> 
			</div>
		</div>
		<div class="canvaszz"></div>
		<canvas id="canvas"></canvas>
	</div>
	<script>
		//宇宙特效
		"use strict";
		var canvas = document.getElementById('canvas'),
		  ctx = canvas.getContext('2d'),
		  w = canvas.width = window.innerWidth,
		  h = canvas.height = window.innerHeight,
		
		  hue = 217,
		  stars = [],
		  count = 0,
		  maxStars = 2500;//星星数量
		
		var canvas2 = document.createElement('canvas'),
		  ctx2 = canvas2.getContext('2d');
		canvas2.width = 100;
		canvas2.height = 100;
		var half = canvas2.width / 2,
		  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
		gradient2.addColorStop(0.025, '#CCC');
		gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
		gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
		gradient2.addColorStop(1, 'transparent');
		
		ctx2.fillStyle = gradient2;
		ctx2.beginPath();
		ctx2.arc(half, half, half, 0, Math.PI * 2);
		ctx2.fill();
		
		// End cache
		
		function random(min, max) {
		  if (arguments.length < 2) {
		    max = min;
		    min = 0;
		  }
		
		  if (min > max) {
		    var hold = max;
		    max = min;
		    min = hold;
		  }
		
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		
		function maxOrbit(x, y) {
		  var max = Math.max(x, y),
		    diameter = Math.round(Math.sqrt(max * max + max * max));
		  return diameter / 2;
		  //星星移动范围，值越大范围越小，
		}
		
		var Star = function() {
		
		  this.orbitRadius = random(maxOrbit(w, h));
		  this.radius = random(60, this.orbitRadius) / 18; 
		  //星星大小
		  this.orbitX = w / 2;
		  this.orbitY = h / 2;
		  this.timePassed = random(0, maxStars);
		  this.speed = random(this.orbitRadius) / 500000; 
		  //星星移动速度
		  this.alpha = random(2, 10) / 10;
		
		  count++;
		  stars[count] = this;
		}
		
		Star.prototype.draw = function() {
		  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
		    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
		    twinkle = random(10);
		
		  if (twinkle === 1 && this.alpha > 0) {
		    this.alpha -= 0.05;
		  } else if (twinkle === 2 && this.alpha < 1) {
		    this.alpha += 0.05;
		  }
		
		  ctx.globalAlpha = this.alpha;
		  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
		  this.timePassed += this.speed;
		}
		
		for (var i = 0; i < maxStars; i++) {
		  new Star();
		}
		
		function animation() {
		  ctx.globalCompositeOperation = 'source-over';
		  ctx.globalAlpha = 0.5; //尾巴
		  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
		  ctx.fillRect(0, 0, w, h)
		
		  ctx.globalCompositeOperation = 'lighter';
		  for (var i = 1, l = stars.length; i < l; i++) {
		    stars[i].draw();
		  };
		
		  window.requestAnimationFrame(animation);
		}
		
		animation();
		
	</script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use('layer', function(){
		    var layer = layui.layer;
			$("#pwd1").blur(function(){
				var pwd = $("#pwd").val();
				var pwd1 = $("#pwd1").val();
				console.log("pwd:"+pwd);
				console.log("pwd1:"+pwd1);
				if(pwd1 != pwd){
					layer.open({title:"密码错误",content:"两次输入的密码不一致"})
				}
			})
			
		})
		
		function PwdUpd(){
			var pwd = $("#pwd").val();
			var pwd1 = $("#pwd1").val();
			var username = $("#username").val();
			console.log(username);
			if(pwd1 != pwd){
				layer.open({title:"密码错误",content:"两次输入的密码不一致"})
			}else{
				$.ajax({
					type : "post",
					url : "UsersServlet",
					data : { op : "updpwd" , pwd : pwd , username : username},
					success : function(data){
						console.log(data);
						if(data == 200){
							layer.msg("密码修改成功!即将跳转到登陆页面",{icon:1,time:2000});
							setTimeout(function(){
								location.href = "Login.jsp";
							},1000);
						}else{
							layer.msg("密码修改失败!",{icon:5,time:2000});
						}
					}
				})
			}
		}
	</script>

</body>
</html>